<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
<title>系统产品入库管理</title>
<meta name="decorator" content="default" />
<style type="text/css">
.ui-field-contain fieldset div.ui-input-text {
	float: left;
	width: 60%;
	display: inline-block;
}

#selectButton {
	margin-left: 10%;
}

#step1 {
	width: 60%;
	margin: auto;
	border: 1px solid #cccccc;
	padding: 40px;
	margin-top: 1em;
	margin-bottom: 1em;
}
</style>
</head>
<body>
	<div id="step1" class="step1">
		<h1 style="text-align: center;">设置基本信息</h1>
		<form:form id="inventoryInForm" modelAttribute="inventoryIn"
			action="${ctx}/inventory/in/product/save" method="post"
			class="form-input">
			<input type="hidden" id="type" name="type"
				value="${inventoryIn.systemProduct}" />
			<div class="icon-buttons">
				<input data-inline="true" type="button" data-icon="back"
					data-iconpos="notext" onclick="doCancel()" value="返回" />
			</div>
			<input type="hidden" name="products" id="products" value="" />
			<div data-role="fieldcontain">
				<label for="employeeId">入库员工:</label>
				<form:select id="employeeId" data-native-menu="false"
					path="employee.id" name="employeeID">
					<c:forEach var="e" items="${employees}">
						<option value="${e.id}"
							${e.id==inventoryIn.employee.id?'selected':''}>
							${e.name}</option>
					</c:forEach>
				</form:select>
			</div>
			<div data-role="fieldcontain">
				<label for="dateTime">进货入库时间:</label>
				<form:input id="dateTime" path="dateTime" readonly="true" />
			</div>
			<div data-role="fieldcontain">
				<label for="systemProduct">进货产品渠道:</label>
				<form:input id="systemProduct" data-inline="true"
					path="systemProduct" readonly="true"
					value="${inventoryIn.systemProduct?'系统产品':'店面自营'}" />
			</div>
			<div data-role="fieldcontain">
				<label for="remark">备注说明:</label>
				<form:textarea path="remark" />
			</div>
			<br />
			<input type="button" onclick="goToStep2()" value="下一步" />
		</form:form>
	</div>
	<div id="step2" style="display:none;">
		<div class="icon-buttons">
			<input data-inline="true" type="button" data-icon="back"
				data-iconpos="notext" onclick="doCancel()" value="返回" /> <input
				onclick="checkSubmit()" data-inline="true" data-icon="check"
				data-iconpos="notext" type="button" value="保存入库单" />

		</div>
		<a id="selectButton" href="#dialog-mult-select" data-rel="popup"
			data-inline="true" data-icon="plus" data-position-to="window"
			data-transition="pop" data-role="button">选择产品</a>
		<div id="productDiv" style="display: none;">
			<form id="inputForm" action="#" class="form-input" method="post">
				<div data-role="fieldcontain">
					<label>产品名称</label>
					<textarea rows="4" cols="1" readonly="readonly" id="productNames"
						style="width: 50%" class="required"></textarea>
				</div>
				<div data-role="fieldcontain">
					<label>进货数量</label> <input type="number" min="1" maxlength="5"
						id="amount" name="amount" required="required" />
				</div>
				<div data-role="fieldcontain">
					<input type="button" onclick="inPro.addProducts()"
						data-inline="true" value="确认添加" />
				</div>
			</form>
		</div>

		<table id="contentTable" data-role="table"
			class="ui-responsive table-stroke">
			<thead>
				<tr>
					<th colspan="4" style="text-align:center;">入库产品列表</th>
				</tr>
				<tr>
					<th>产品名称</th>
					<th>产品规格</th>
					<th>进货数量</th>
					<th>零售价</th>
				</tr>
			</thead>
			<tbody id="tbody">
			</tbody>
		</table>
	</div>
	<script type="text/javascript">
		var productType = "${inventoryIn.systemProduct ? 'system':'self'}";
		var addedElements = [];
		var selected = [];
		function doCancel() {
			var content = "返回后，本次入库数据将会丢失，确认取消入库？";
			global.confirm(content, function() {
				var url = "${ctx}/inventory/in/product/cancel";
				window.location.href = url;
			});
			return false;
		};

		function trClick(tr) {
			if (!tr.id) {
				return;
			}
			$("#contentTable tbody tr").removeClass("select_active");
			$(tr).addClass("select_active");
			var obj = $("tbody tr#" + tr.id);
			var name = obj.attr('name');
			var amount = Number($("tr#" + tr.id + " .amount").html());
			//-----operation
			var item = $("#opreation-" + tr.id);
			if (item.length > 0) {
				item.remove();
				return;
			}
			$(".opreation").remove();
			var html = "<tr id='opreation-'"+ tr.id+" class='opreation'>";
			html += "<td>数量</td>";
			html += "<td colspan='1'><input type='button'  index='"
					+ tr.id
					+ "' class='menu-minus' data-inline='true' data-iconpos='notext'  data-icon='minus' onclick='return minusValue(this)' />";
			//---text
			html += "<input type='text' index='"
					+ tr.id
					+ "' class='amount'  type='number' min='1' required='required' maxlenght='5' id='amount-"
					+ tr.id + "' value='" + amount
					+ "' onclick='return updateValue(this)' ></input>";
			html += "<input type='button' class='menu-plus'  index='"
					+ tr.id
					+ "' data-inline='true' data-iconpos='notext'  data-icon='plus' onclick='return plusValue(this)'/></td>";
			//--delete		
			html += "<td colspan='1'>";
			html += "<input type='button' onclick=doDelete('" + tr.id + "','"
					+ name + "') data-inline='true' value='删除'></input>";
			html += "</td>";
			html += "<td></td></tr>";
			$(tr).after(html);
			$("#contentTable").trigger('create');
			$("#contentTable").undelegate();
			$("#contentTable").delegate(".amount", "change", function() {
				updateValue($(this));
			});

			//----operation
		}

		function minusValue(item) {
			var productID = $(item).attr("index");
			var node = getData(productID);
			var newAmount = Number(node.amount) - 1;
			if (newAmount<1||newAmount>100000) {
				showTip("必须输入数值类型，且必须在1到100000之间");
				return;
			}
			node.amount = newAmount;
			$("tr#" + productID + " .amount").html(newAmount);
			document.getElementById("amount-" + productID).setAttribute(
					"value", newAmount);
		}

		function plusValue(item) {
			var productID = $(item).attr("index");
			var node = getData(productID);
			var newAmount = Number(node.amount) + 1;
			if (newAmount<1|| newAmount>100000) {
				showTip("必须输入数值类型，且必须在1到100000之间");
				return;
			}
			node.amount = newAmount;
			$("tr#" + productID + " .amount").html(newAmount);
			document.getElementById("amount-" + productID).setAttribute(
					"value", newAmount);
		}

		function doDelete(pid, name) {
			inPro.removeItem("确定删除产品：" + name + "?", pid, "system");
		}
		function getData(productID) {
			for (var i = 0, k = addedElements.length; i < k; i++) {
				var node = addedElements[i];
				if (node.id == productID) {
					return node;
				}
			}
		}
		function updateValue(item) {
			var productID = $(item).attr("index");
			var newAmount = Number($(item).val());
			if (newAmount<0|| newAmount>100000) {
				showTip("必须输入数值类型，且必须在1到100000之间");
				return;
			}
			var node = getData(productID);
			node.amount = newAmount;
			$("tr#" + productID + " .amount").html(newAmount);
		}

		var item = null;
		var inPro = {
			finishSelect : function() {
				selected = [];
				var names = "";
				var items = $('#dialog-mult-select ul li input');
				for (var i = 0; i < items.length; i++) {
					var item = $(items[i]);
					if (item.prop("checked") == true) {
						var node = {};
						node.id = item.attr("id");
						node.name = item.attr("name");
						node.spec = item.attr("spec");
						node.price = item.attr("price");
						selected[selected.length] = node;
						names += node.name + "\r\n";
					}
				}
				$("#productNames").val(names);
				showDiv("#productDiv");
			},
			loadingProductList : function(type) {
				jQuery
						.ajax({
							url : "${ctx}/inventory/in/productData",
							type : "post",
							data : {
								"type" : type,
							},
							success : function(data) {
								var objs = eval(data);
								var html = "";
								for (var index = 0; index < objs.length; index++) {
									var node = objs[index];
									html += "<li id='"+node.id+"'><input type='checkbox' name='" + node.name
									+ "'"+" spec='"
									+ node.spec + "' price='" + node.retailPrice + "' id='" + node.id + "' value='" + node.name
									+ "'>";
									html += "<label for='" + node.id + "'>"
											+ node.name + "</label></li>";
								}
								$("#dialog-mult-select h1").html("选择产品");
								var checkAll = $("#dialog-mult-select .checkAll");
								checkAll.attr("checked", false);
								checkAll.checkboxradio("refresh");
								$("#dialog-mult-select .ui-filterable input")
										.val("");
								$("#submitBtn").die().live("click", function() {
									$("#dialog-mult-select").popup('close');
									inPro.finishSelect();
								});
								$("#dialog-mult-select .checkAll")
										.die()
										.live(
												"click",
												function() {
													var items = $("#dialog-mult-select ul li");
													for (var i = 0; i < items.length; i++) {
														var item = $(items[i]);
														var child = item
																.find("input");
														child.attr("checked",
																this.checked);
														child
																.checkboxradio("refresh");
													}
												});
								$("#dialog-mult-select ul").append(html);
								$("#dialog-mult-select").trigger("create");
							},
							error : function(data) {
								showTip("加载产品列表失败");
							}
						});// end ajax
			},
			removeItem : function(content, productID, type) {
				global.confirm(content, function() {
					removeChild("tbody", productID);
					$(".opreation").remove();//delete operations
					$("#dialog-mult-select ul li#" + productID).show();
					$("#contentTable").trigger("create");
					for (var int = 0; int < addedElements.length; int++) {
						if (addedElements[int].id == productID) {
							addedElements.splice(int, 1);
							break;
						}
					}
				});
			},
			addItem : function(node, type) {
				var name = node.name;
				var spec = node.spec;
				var pid = node.id;
				var amount = node.amount;
				var price = node.price;
				var line = "<tr id='"+pid+"' name='"+name+"'"
						+ ">"
						+ "<td>" + name + "</td>" + "<td>" + spec + "</td>"
						+ "<td class='amount'>" + amount + "</td>" + "<td>"
						+ price + "</td>" + "</tr>";
				$("#contentTable").append(line);
				$("#contentTable").trigger("create");
				$("#contentTable tbody tr#" + pid).click(function() {
					trClick(this);
				});
				$("#dialog-mult-select ul li#" + pid + " input").removeAttr(
						"checked");
				$("#dialog-mult-select ul li#" + pid).hide();
			},
			addProduct : function(node) {
				var elemet = {};
				elemet.id = node.id;
				elemet.amount = node.amount;
				addedElements[addedElements.length] = elemet;
				inPro.addItem(node, "system");
			},
			addProducts : function() {
				if ($("#inputForm").valid()) {
					var amount = $("#amount").val();
					if (100000 < Number(amount)) {
						alert(amount);
						return;
					}
					for (var i = 0; i < selected.length; i++) {
						var node = selected[i];
						node.amount = amount;
						inPro.addProduct(node);
					}
					selected = [];
					$("#productNames").val("");
					hideDiv("#productDiv");
				} else {
					showTip("请先选择产品，并输入数量");
				}
				return false;
			}
		};
		function checkSubmit() {
			if (addedElements.length > 0) {
				var content = "在保存入库单前，请再次确认本次入库产品，数量是否全部正确？";
				global.confirm(content, function() {
					$("#products").val(JSON.stringify(addedElements));
					$("#inventoryInForm").submit();
				});
			} else {
				global.confirm("请先登记全部入库产品", function() {
				});
				return false;
			}
			return false;
		}

		function firstStep() {
			$('#step1').css('display', 'none');
			$('#step2').css('display', 'block');
		}
		function hideDiv(divID) {
			$(divID).css('display', 'none');
		}
		function showDiv(divID) {
			$(divID).css('display', 'block');
		}
		function goToStep2() {
			$('#step1').css('display', 'none');
			$('#step2').css('display', 'block');
		}
		$().ready(function() {
			$("#inputForm").valid();
			inPro.loadingProductList(productType);
		});
	</script>
</body>
</html>
